<template>
  <div>
    <userTitel :title="title"></userTitel>

    <!-- 卡片 -->
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="员工账号">
          <el-input
            v-model="formObj.employeeNumber"
            style="width: 390px; margin-right: 60px"
            placeholder="请输入员工账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input
            v-model="formObj.name"
            style="width: 390px; margin-right: 60px"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作模式">
          <el-select
            style="width: 390px"
            v-model="formObj.workPatternName"
            filterable
            placeholder="请选择工作模式"
          >
            <el-option
              v-for="item in optionsWork"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="月份">
          <el-date-picker
            style="width: 390px; margin-right: 60px"
            v-model="formObj.month"
            type="month"
            placeholder="清选择月份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属机构 :">
          <el-select
            @clear="handleClear"
            v-model="formObj.agency.name"
            style="width: 390px"
            placeholder="请选择所属机构"
          >
            <el-option
              hidden
              :value="formObj.agency.name"
              :label="formObj.agency.name"
            >
            </el-option>
            <el-tree
              :data="data"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClickOne"
            ></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 60px">
          <el-button type="primary" @click="souSou">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin-top: 20px" shadow="never">
      <el-row>
        <el-button type="primary" @click="setUp">排班设置</el-button>
        <el-button type="primary" plain>绑定排班</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table
        border
        stripe
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column fixed="left" type="selection" width="55">
        </el-table-column>
        <el-table-column fixed label="员工账号" width="120">
          <template slot-scope="scope">{{ scope.row.employeeNumber }}</template>
        </el-table-column>
        <el-table-column fixed prop="name" label="员工姓名" width="120">
        </el-table-column>
        <el-table-column
          fixed
          prop="phone"
          label="员工电话"
          show-overflow-tooltip
          width="120"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="userType"
          label="员工角色"
          show-overflow-tooltip
          width="120"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="workPatternName"
          label="当前工作模式"
          show-overflow-tooltip
          width="120"
        >
        </el-table-column>

        <!-- 每天 -->
        <el-table-column
          v-for="(item, index) in workSchedules"
          :key="index"
          :label="(index + 1).toString()"
          show-overflow-tooltip
          width="80"
        >
          <span :class="{ top: item === true, xiu: item === false }">
            {{ item === true ? "上" : "休" }}</span
          >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getList } from "@/api/operational-range";
import { getWord, getArrange } from "@/api/workArrange-manage";
export default {
  name: "workArrange-manage",
  data() {
    return {
      title: "排班管理",
      formObj: {
        workPatternId: "", //id
        employeeNumber: "", //员工账号
        name: "", //姓名
        phone: "", //手机号
        userType: "", //员工角色
        workPatternName: "", //工作模式
        month: "", //月份
        agency: { name: "" }, //所属机构
      },
      // 树形
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 工作模式下拉
      optionsWork: [],
      value: "", //工作模式
      value2: "", //月份
      // 表格
      tableData: [],
      // 分页
      page: {
        page: 1, //当前页
        pageSize: 10, //每页10条
      },
      total: 0, //总页
      currentPage4: 1, //默认在第1页
      workSchedules: [], //排班表格数组
    };
  },

  created() {
    this.getMechanism();
    // 工作模式
    this.getWordList();
    // 排班列表
    this.getArrangeList();
  },

  methods: {
    // 下拉数据
    async getMechanism() {
      const res = await getList();
      // console.log(JSON.parse(res.data));
      this.data = JSON.parse(res.data);
    },
    // 树形
    handleNodeClickOne(data) {
      console.log(data.name);
      this.formObj.agency.name = data.name;
      // console.log(this.formObj);
    },
    handleClear() {
      this.name = "";
    },
    // 工作模式列表
    async getWordList() {
      const res = await getWord();
      console.log(res.data);
      for (const key in res.data) {
        // console.log(res.data[key]);
        this.optionsWork.push(...res.data[key]);
      }
    },
    // 表格
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getArrangeList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.getArrangeList();
    },
    // 获取排班列表
    async getArrangeList() {
      const res = await getArrange(this.page);
      console.log(res.data);
      this.tableData = res.data.items;
      res.data.items.forEach((item) => {
        this.workSchedules = item.workSchedules;
      });
      // 总条目
      this.total = res.data.counts;
    },
    // 搜索
    async souSou() {
      const res = await getArrange({
        page: this.page.page,
        pageSize: this.page.pageSize,
        employeeNumber: this.formObj.employeeNumber,
        name: this.formObj.name,
        phone: this.formObj.phone, //手机号
        month: this.formObj.month, //月份
        workPatternId: this.formObj.workPatternName, //工作模式
      });
      console.log(res.data.items);
      this.tableData = res.data.items;
      this.toggleSelection();
    },
    // 排班设置
    setUp() {
      this.$router.push("workArrange-setting");
    },
  },
};
</script>

<style scoped lang="scss">
.xiu {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: #eff3f8;
  border: 1px solid #dadee4;
  text-align: center;
  line-height: 24px;
  border-radius: 50%;
}
.top {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: #ffeeeb;
  color: #e15536;
  border: 1px solid #e15536;
  text-align: center;
  line-height: 24px;
  border-radius: 50%;
}
::v-deep .el-card {
  text-align: left;
  line-height: 24px;
}
</style>
